/**
* @author Alexander Smirnov (luc@hot.ee)
* General viewport
*/

var ViewportInterface = new Interface('getProjectionModel', 'getSurfaceElement');

var Viewport = SMap.Viewport = SMap.Class({
	init: function(map, div) {
		var div = getElement(div);
		var layersDiv;
		
		var listeners = this.listeners = new Listeners();
		var projection = new ProjectionModel(map);
		
		projection.setResolution(1000);
		
		div.innerHTML = '';
		
		prepareSurface(div);
		
		map.listeners.add("move", update);
		
		update();
		
		function update() {
			var xy = projection.getCenterXY();
			with(layersDiv.style) {
				left = xy.x + "px";
				top = xy.y + "px";
			}
		}
		
		function prepareSurface(div) {
			/*
			 * top_layer = this.div
			 *  |
			 *  *-- absolute layer 1 (width = 100%; height = 100%)
			 *       |
			 *       *-- absolute layer 2 = this.imagesDiv (moving this one)
			 *            |
			 *            *-- images
			 */
			
			var absLayer1 = document.createElement("div");
		    with(absLayer1.style) {
				position = "relative";
				width = height = "100%";
				overflow = "hidden";
			}
			div.appendChild(absLayer1);
			
			var absLayer2 = document.createElement("div");
		    with (absLayer2.style) { 
				position = "absolute"; 
				width = height = "40px";
				left = top = "-20px";
				backgroundColor = 'green';
				opacity = 0.5;
			}
		    absLayer2.oncontextmenu = function() { return false; };
			absLayer1.appendChild(absLayer2);
			
			layersDiv = absLayer2;
		}
		
		this.getProjectionModel = function() {
			return projection;
		}
		
		this.getSurfaceElement = function() {
			return div;
		}
	}
});
